<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片轮播</title>
		<style type="text/css">
			*{margin:0px;padding:0px;}
			ul{list-style:none;}
			.main{width:760px;height:300px;margin:50px auto;position:relative;}
			.pic{width:760px;height:300px;overflow:hidden;position: relative;}
			.pic ul li{width:760px;height:300px;position:relative;overflow:hidden; display: none;}
			.img1{position:absolute;left:-760px;top:0px;display:none;}
			.img2{position:absolute;left:-20px;top:0px;display:none;}
			.nav ul li{border:1px solid white;width:15px;height:15px;float:left;margin-left:5px;}
			.nav{width:125px;height:30px;position:absolute;left:620px;bottom:10px;}
			.select{background-color:white;}
			.buttonleft{
				position: absolute;
				left: 0; top:0; width: 50px; height: 300px;
				background: url(img/button.png) 0 center no-repeat;
			}
			.buttonright{
				position: absolute;
				right: 0; top:0; width: 50px; height: 300px;
				background: url(img/button.png) -50px center no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="pic">
				<ul>
					<li style="background:url(img/bg1.jpg);">
						<img class="img1" src="img/text1.png"/>
						<img class="img2" src="img/con1.png"/>
					</li>
					<li style="background:url(img/bg2.jpg);">
						<img class="img1" src="img/text2.png"/>
						<img class="img2" src="img/con2.png"/>
					</li>
					<li style="background:url(img/bg3.jpg);">
						<img class="img1" src="img/text3.png"/>
						<img class="img2" src="img/con3.png"/>
					</li>
					<li style="background:url(img/bg4.jpg);">
						<img class="img1" src="img/text4.png"/>
						<img class="img2" src="img/con4.png"/>
					</li>
					<li style="background:url(img/bg5.jpg);">
						<img class="img1" src="img/text5.png"/>
						<img class="img2" src="img/con5.png"/>
					</li>
				</ul>
				<div class="buttonleft"></div>
				<div class="buttonright"></div>
			</div>
		
			<div class="nav">
				<ul>
					<li class="select"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
			var index = -1;
			var $piclist = $(".pic ul li");
			var $navlist = $(".nav ul li");
			setInterval(tab,2000);
			tab();
			function tab(){
				index = ++index%5;
				$piclist.eq(index).fadeIn(300).siblings().fadeOut(100);
				$navlist.eq(index).addClass("select").siblings().removeClass("select");
				$piclist.eq(index).find(".img1").css("left","-760px").stop().show().animate({left:0},500, function(){
					$piclist.eq(index).find(".img2").css("left","-20px").stop().show().animate({left:0},500);
				}).next().hide();
			}
			$(".buttonleft").on("click",function(){
				index+=3;
				tab();
			});
			$(".buttonright").on("click",function(){
				tab();
			})
		</script>
	</body>
</html>